import React from 'react';
import Screen from '../Base/Screen';

import {Icon, Layout, Menu} from 'antd';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import {SystemConfig, getPath,formatPath} from '../../router/router';

const SubMenu = Menu.SubMenu;
const {Sider} = Layout;

class SiderMenu extends Screen {
    static defaultProps = {
        inDrawer: false,
    };

    constructor(props) {
        super(props);

        this.state = {
            inDrawer: props.inDrawer || false,
            stageHeight: 0,
        }
    }

    componentDidMount() {
        this.onWindowResize();
        window.addEventListener('resize', this.onWindowResize.bind(this));

    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.onWindowResize.bind(this));
    }

    onWindowResize() {
        this.setState({
            stageHeight: window.innerHeight - 64,
        }, () => {
            console.log('this.state.stageHeight', this.state.stageHeight);
        });
    }

    genNavItem = (nav) => {
        if (nav.pass) return null;

        if (nav.subMenu && nav.subMenu.length > 0) {
            return (
                <SubMenu key={nav.path || nav.name}
                         title={<span><Icon type={nav.icon || 'file'}/><span>{nav.name}</span></span>}>
                    {
                        nav.subMenu.map(n => (
                            this.genNavItem(n)
                        ))
                    }
                </SubMenu>
            )
        } else {
            return (
                <Menu.Item key={nav.path} onClick={this.onPushScreen.bind(this, nav.path)}>
                    <Icon type={nav.icon || 'file'}/>
                    <span>{nav.name}</span>
                </Menu.Item>
            )
        }
    };

    render() {
        return (
            <div className="besider">
                <Sider
                    width={this.state.inDrawer ? 256 : 200}
                    style={{background: '#fff', height: this.state.stageHeight + 'px'}}
                    trigger={null}
                    collapsible
                    theme={'light'}
                    breakpoint="lg"
                    collapsed={this.props.collapsed}
                    onCollapse={(collapsed, type) => {
                        this.onSetValueToStore(['root', 'app', 'collapsed'], collapsed);
                        this.onSetValueToStore(['root', 'app', 'collapsedType'], type)
                    }}
                >
                    <Menu
                        key="BesideMainMenu"
                        mode="inline"
                        theme="light"
                        selectedKeys={[this.props.location.pathname]}
                        inlineCollapsed={this.props.collapsed}
                    >
                        {
                            this.state.inDrawer ? (
                                SystemConfig.menu.filter(f => !f.pass).map(nav => (
                                    this.genNavItem(nav)
                                ))
                            ) : (
                                SystemConfig.menu[SystemConfig.menu.findIndex(m => formatPath(m.path) === formatPath((getPath(this.props.location.pathname)[0]&&getPath(this.props.location.pathname)[0].path) || '/system'))].subMenu.filter(f => !f.pass).map(nav => (
                                    this.genNavItem(nav)
                                ))
                            )
                        }
                    </Menu>
                </Sider>
            </div>
        )
    }
}

export default withRouter(connect()(SiderMenu));
